<template>
  <div id="GetInformation" >
    <!-- <app-Header title="领取信息"></app-Header> -->
    <group labelAlign="right" labelWidth="70px" labelMarginRight="5px">
      <x-input title="姓名" placeholder="输入姓名" required="required" v-model="Name"></x-input>
      <x-input title="手机号" placeholder="请输入手机号码" :v-model="inputphone" is-type="china-mobile" ref="input01"></x-input>
      <x-address title="所在地区" placeholder="选择城市" :list="ChinaAddressData" value-text-align="left" v-model="Address"></x-address>
      <div class="vux-x-input weui-cell">
        <div class="weui-cell__hd"><!---->
          <label class="weui-label" style="width: 70px; text-align: right; margin-right: 5px;">详细地址</label>
        </div>
        <div class="weui-cell__bd weui-cell__primary">
          <input autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" type="text" placeholder="请填写街道小区门牌号等" v-model='DetAddress' class="weui-input">
        </div>
      </div>
    </group>
    <box gap="20px 20px">
      <x-button type="primary" action-type="button" @click.native="Validform">提交</x-button>
    </box>
    <App-Mask :mask="mask"></App-Mask>
  </div>

</template>

<script>
// import AppHeader from '../header/Header'
import AppMask from '../../components/mask/Mask'
import Box from 'vux/src/components/box'
import XInput from 'vux/src/components/x-input'
import XButton from 'vux/src/components/x-button'
import Group from 'vux/src/components/group'
import Selector from 'vux/src/components/selector'
import Datetime from 'vux/src/components/datetime'
import XAddress from 'vux/src/components/x-address'
import {ChinaAddressV3Data} from 'vux'

export default {
  name: 'GetInformation',
  components: {
    Box,
    XInput,
    XButton,
    Group,
    Selector,
    Datetime,
    XAddress,
    ChinaAddressV3Data,
    // AppHeader,
    AppMask
  },
  data () {
    return {
       // new Date().toLocaleDateString().replace('/', '-').replace('/', '-')
      // isShow: false,
      inputphone: '',
      Name: '',
      Sex: '',
      Address: [],
      DetAddress: '',
      ChinaAddressData: ChinaAddressV3Data,
      SexList: [{
        key: 1,
        value: '男'
      }, {
        key: 0,
        value: '女'
      }],
      mask: {
        'isShow1': false,
        'isShow2': false,
        'isShow3': false,
        'isShow4': false
      }
    }
  },
  methods: {
    Validform () {
      if (this.$data.Name !== '' && this.$data.Address.length === 3 && this.$data.DetAddress !== '') {
        console.log('OK')
        this.mask.isShow4 = true
        return this.mask['isShow4']
      } else {
        console.log('ERROR')
      }
    }
  },
  watch: {
    Name: function (newVal, oldVal) {
      if (newVal !== '' && oldVal !== '' && newVal !== oldVal) {
        // console.log('new：%s，old：%s，b：%s，s：%s，w：%s，q：%s，a：%s，', newVal, oldVal, this.$data.Birthday, this.$data.Sex, this.$data.WeChatNo, this.$data.QQNo, this.$data.Address)
      }
    }
  }
}
</script>
<style lang="less">
  @import "../../assets/less/getinformation/getinformation.less";
</style>
